<template>
  <div class="links">
    <h2>
      <span>
        <a href="/">申请</a>
      </span>
      友情链接
    </h2>
    <ul>
      <li
        v-for="i in arr1"
        :key="i"
      >
        <a href=""> 心理咨询 </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr1: [1, 2, 3, 4, 5, 6, 7]
    }
  }
}
</script>

<style lang="scss" scoped>
.links {
  border-radius: 8px;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  background: #fff;
  margin-bottom: 20px;
  h2 {
    padding: 20px;
    font-size: 18px;
    span {
      float: right;
      font-size: 16px;
      font-weight: normal;
      a {
        color: #666;
      }
    }
  }
  ul {
    padding: 0 20px 20px 20px;
    overflow: hidden;
    li {
      width: 50%;
      float: left;
      display: inline-block;
      line-height: 30px;
      text-align: center;
      a {
        margin: 5px;
        border: #666 1px solid;
        display: block;
        border-radius: 3px;
        color: #666;
      }
    }
    li:hover a {
      color: #000;
    }
  }
}
</style>
